<template>
  <view>
    <navbar></navbar>
  <view style="margin-top: 180rpx; width: 100%;">
    <!-- 推荐添加小程序 -->
    <view class="weui-cell" style="background: #fff9eb;" >
      <view class="weui-cell__hd">
        <image src="@/static/resource/images/ic_myapp.png" style="display:block;width:40rpx;height:40rpx;margin-right:14rpx;"></image>
      </view>
      <view class="weui-cell__bd">
        <text style="color: #100F0FFF;font-size: 13px;">点击右上角”添加到我的小程序“，方便下次找到</text>
      </view>
      <view class="weui-cell__ft">
        <image src="@/static/resource/images/modal_closer.png" style="display:block;width:40rpx;height:40rpx; margin-left:auto"></image>
      </view>
    </view>
  </view>
    <!--实现卡片渲染-->
    <view class="content">
      <text class="budget-title">全部预算</text>
      <view class="budget">
        <text class="budget-amount">¥ 80000 结余 ¥500</text>
      </view>
      <view class="expenses">
        <text class="expenses-title">支出 ¥ 75000</text>
      </view>
    </view>
    <!--支出列表渲染-->
    <view class="weui-cells hosp-list">
      <view class="weui-cell hosp-item weui-cell_access" v-for="(item,index) in hospitals" :key="item.id" :data-hid="item.id">
        <view >
          <view class="hospital-item">
            <image class="hosp-avatar" :src="item.avatar_url ? item.avatar_url : '@/static/resource/images/avatar.jpg'" mode="aspectFill"></image>
            <text class="hosp-name">{{item.name}}</text>
          </view>
          <view>
            <text class="hosp-rank">{{item.rank}}</text>
            <text class="hosp-label">{{item.label}}</text>
          </view>
          <view>
            <text class="hosp-intro">{{item.intro}}</text>
          </view>
          </view>
        <view>
        </view>
      </view>
    </view>
  </view>
</template>




<script setup>
import { ref } from 'vue'
import {    } from '@dcloudio/uni-app'
const title = ref('100000元')

// 医院列表
const hospitals = ref([{"id":1,"name":"彩礼","avatar_url":"http://159.75.169.224/uploads/20231105/6a284b70666a936caca0af7f8268c9d8.jpg","rank":"zyh","label":"2024年10月13日","intro":"备注1"},
  {"id":2,"name":"酒店费用","avatar_url":"http://159.75.169.224/uploads/20231105/80221cd6111536ab328cda2ea0eef452.jpg","rank":"zyh","label":"2024年10月14日","intro":"备注2"},
  {"id":3,"name":"烟费用","avatar_url":"http://159.75.169.224/uploads/20231105/6a284b70666a936caca0af7f8268c9d8.jpg","rank":"wtt","label":"2024年10月15日","intro":"备注3"},
  {"id":4,"name":"酒费用","avatar_url":"http://159.75.169.224/uploads/20231105/80221cd6111536ab328cda2ea0eef452.jpg","rank":"wtt","label":"2024年10月17日","intro":"备注4"}]);

</script>

<style>
  .content {
    margin-top: 30rpx;
    width: 100%;
    height: 280rpx;
    background-color: #4FB682FF;
    border-radius: 15rpx; /* 添加圆角 */
  }
  .budget {
    display: flex;
    margin-left: 50rpx;
    margin-top: 40rpx;
  }

  .budget-title {
    color: #FFFFFFFF;
    font-size: 40rpx;
  }

  .budget-amount {
    color: #FFFFFFFF;
    font-size: 35rpx;
  }

  .expenses {
    display: flex;
    justify-content: flex-start; /* 子元素在主轴（水平轴）的起点对齐 通常是左侧*/
    align-items: flex-end;/* 子元素在交叉轴（垂直轴）的终点对齐 左侧 */
    height: 50px;
  }

  .expenses-title {
    color: #FFFFFFFF;
    font-size: 35rpx;
  }

  .hospital-item {
    display: flex; /*启用 Flexbox 布局，子元素默认水平排列。 */
    align-items: center; /* 子元素在垂直方向上居中对齐 */
  }


  .hosp-list {
    margin: 10rpx 0 0 0;
    background: none;
  }
  .hosp-list::before {
    display: none;
  }
  .hosp-list::after {
    display: none;
  }

  .hosp-item {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    padding: 20rpx;
    margin: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.04);
  }
  .hosp-item::before {
    display: none;
  }
  .hosp-item::after {
    display: none;
  }
  .hosp-name {
    font-weight: bold;
    font-size: 34rpx;
  }
  .hosp-avatar {
    display: block;
    width: 50rpx;
    height: 55rpx;
    border-radius: 10rpx;
    overflow: hidden;
    margin-right: 20rpx;
  }
  .hosp-line {
    margin-top: 5rpx;
  }
  .hosp-line text {
    font-size: 26rpx;
  }
  .hosp-rank {
    font-weight: bold;
    color: #0bb585;
    margin-right: 15rpx;
  }
  .hosp-label {
    font-weight: bold;
    color: #0ca7ae;
    margin-right: 15rpx;
  }
  .hosp-intro {
    color: #999999;
  }

</style>
